import React from 'react';
import {NumericUnitList} from '../FieldFormatTypes'
import {IColumn} from "./index";
import {IChartConfig} from "@/pages/SelfQuery/type";
import {getLastLevelVisualTypeVal, isLevelVisualTypeColumn} from "@/pages/SelfQuery/utils";

require('./index.less')

interface ITextPaperProps {
  configs: IChartConfig;
  columns: IColumn[];
  dataSource: any;
}

const Kpi: React.FC<ITextPaperProps> = (props) => {

  const {columns, dataSource, configs} = props
  const {model} = configs
  return (
    <div className={`statisticBody`}>
      <div className={`statisticMain`}>
        {columns.map((column: IColumn, idx: number) => {
          const {key} = column
          let num = dataSource[0][key].toString()
          let currency: any
          let isUp = true
          if (idx == 0) {
            currency = num.substring(num.length - 1, num.length)
            if (isLevelVisualTypeColumn(key, model)) {
              num = getLastLevelVisualTypeVal(num)
            } else if (NumericUnitList.includes(currency)) {
              num = num.substring(0, num.length - 1)
            } else {
              currency = ''
            }
          } else {
            if (num.indexOf("-") != -1) {
              isUp = false;
            }

          }

          return (
            <div
              key={idx}
              className={idx == 0 ? 'statisticLeft' : isUp ? 'statisticRightUp' : 'statisticRightUp'}
            >
                <span className='statisticNum'>
                  <span style={{fontWeight: 400}}>{num}</span>{idx == 0 ?
                  <span style={{fontSize: '12px'}}>{currency}</span> : null
                  // <Icon style={{fontSize: '20px'}} type={isUp ? `arrow-up` : `arrow-down`}/>
                }
                </span>
              <span className='statisticTitle'> {column.title}</span>
            </div>
          )
        })}
      </div>
    </div>
  )

}
export default Kpi
